<template>
    <div>
        <div class="pro_carousel">
            <el-carousel id="pro_carousels" :interval="4000">
                <el-carousel-item v-for="(item,index) in carouselProducts" :key="index">
                    <div class="carousel_box">
                        <div class="carousel_title">{{item.name}}</div>
                        <div class="carousel_desc">{{item.seoDescription}}</div>
                        <div class="carousel_link" @click="inDetail(item)">立即查看</div>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="product container">
            <div class="row">
                <div class="col-md-3">
                    <div class="left_title">
                        <h3 class="titleText">产品分类</h3>
                        <span>Ya Meng Product Category</span>
                    </div>
                    <div class="left_list">
                        <ul class="nav nav-tabs" role="tablist">
                            <li id="overBalance" role="presentation"
                                @click="toList(1,PRODUCT_TYPE.PRODUCT_OVER_BALANCE.key)"><a class="nav-tabs-lia"
                                                                                            href="#pro_recommend"
                                                                                            aria-controls="pro_recommend"
                                                                                            role="tab"
                                                                                            data-toggle="tab">
                                {{PRODUCT_TYPE.PRODUCT_OVER_BALANCE.value}}</a></li>
                            <li role="presentation" @click="toList(1,PRODUCT_TYPE.PRODUCT_HOT.key)"><a
                                    class="nav-tabs-lia" href="#pro_recommend" aria-controls="pro_recommend" role="tab"
                                    data-toggle="tab">
                                {{PRODUCT_TYPE.PRODUCT_HOT.value}}</a></li>
                            <li role="presentation" @click="toList(1,PRODUCT_TYPE.PRODUCT_HY.key)"><a
                                    class="nav-tabs-lia" href="#pro_recommend" aria-controls="pro_recommend" role="tab"
                                    data-toggle="tab">
                                {{PRODUCT_TYPE.PRODUCT_HY.value}}</a></li>
                            <li role="presentation" @click="toList(1,PRODUCT_TYPE.PRODUCT_GENERAL_MERCHANDISE.key)"><a
                                    class="nav-tabs-lia" href="#pro_recommend" aria-controls="pro_recommend" role="tab"
                                    data-toggle="tab">
                                {{PRODUCT_TYPE.PRODUCT_GENERAL_MERCHANDISE.value}}</a></li>
                            <li role="presentation" @click="toList(1,PRODUCT_TYPE.PRODUCT_HOME_APPLIANCE.key)"><a
                                    class="nav-tabs-lia" href="#pro_recommend" aria-controls="pro_recommend" role="tab"
                                    data-toggle="tab">
                                {{PRODUCT_TYPE.PRODUCT_HOME_APPLIANCE.value}}</a></li>
                            <li role="presentation" @click="toList(1,PRODUCT_TYPE.PRODUCT_VEGETABLE.key)"><a
                                    class="nav-tabs-lia" href="#pro_recommend" aria-controls="pro_recommend" role="tab"
                                    data-toggle="tab">
                                {{PRODUCT_TYPE.PRODUCT_VEGETABLE.value}}</a></li>
                            <li role="presentation" @click="toList(1,PRODUCT_TYPE.PRODUCT_CAR_HOUSE.key)"><a
                                    class="nav-tabs-lia" href="#pro_recommend" aria-controls="pro_recommend" role="tab"
                                    data-toggle="tab">
                                {{PRODUCT_TYPE.PRODUCT_CAR_HOUSE.value}}</a></li>
                            <li role="presentation" @click="toList(1,PRODUCT_TYPE.PRODUCT_MEDICAL_TREATMENT.key)"><a
                                    class="nav-tabs-lia" href="#pro_recommend" aria-controls="pro_recommend" role="tab"
                                    data-toggle="tab">
                                {{PRODUCT_TYPE.PRODUCT_MEDICAL_TREATMENT.value}}</a></li>
                            <li role="presentation" @click="toList(1,PRODUCT_TYPE.PRODUCT_CLOTHING.key)"><a
                                    class="nav-tabs-lia" href="#pro_recommend" aria-controls="pro_recommend" role="tab"
                                    data-toggle="tab">
                                {{PRODUCT_TYPE.PRODUCT_CLOTHING.value}}</a></li>
                            <li role="presentation" @click="toList(1,PRODUCT_TYPE.PRODUCT_SKIN_CARE.key)"><a
                                    class="nav-tabs-lia" href="#pro_recommend" aria-controls="pro_recommend" role="tab"
                                    data-toggle="tab">
                                {{PRODUCT_TYPE.PRODUCT_SKIN_CARE.value}}</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-9">
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="pro_recommend">
                            <el-row class="panel-body">
                                <el-col class="pro_card body-col" :xs="12" :sm="12" :md="8" :lg="8"
                                        v-for="(item,index) in products" :key="index">
                                    <el-card class="col-card" :body-style="{ padding: '10px'}" shadow="hover">
                                        <img v-if="!item.picList" src="../../../public/base/imgs/product/BG-wine-1.jpg"
                                             class="image">
                                        <img v-if="item.picList" :src="item.picList[0]" class="image">
                                        <div style="padding: 14px;">
                                            <span>{{item.name}}</span>
                                            <div class="bottom clearfix">
                                                <time class="time">{{item.seoDescription}}</time>
                                            </div>
                                        </div>
                                        <el-button type="text" class="pro_card_to button" @click="inDetail(item)">查看详情
                                        </el-button>
                                    </el-card>

                                </el-col>
                            </el-row>
                        </div>
                    </div>
                    <div class="pageHelper">
                        <page-helper ref="pageHelper" :list="toList"></page-helper>
                    </div>
                </div>
            </div>

        </div>
    </div>

</template>

<script>
    import PageHelper from "../../components/PageHelper";

    export default {
        name: "ProductList",
        components: {PageHelper},
        data() {
            return {
                message: "产品列表页",
                productCarousel: ["/base/imgs/product/hengyan-wine-1.jpg", "/base/imgs/product/hengyan-wine-1.jpg", "/base/imgs/product/hengyan-wine-1.jpg", "/base/imgs/product/hengyan-wine-1.jpg"],
                products: [],
                //如果使用对象数组，这里必须有值，否则document.queryselector无法el-carousel无法获取
                carouselProducts:[{},{},{},{},{}],
                carouselImg:[],
                typeId: 10,
                PRODUCT_TYPE: PRODUCT_TYPE,
            }
        },
        mounted() {
            //获取轮播产品
            this.getCarouselList();
            //获取屏幕尺寸
            this.getWidth();
            //初始化数据
            let overBalance = document.getElementById("overBalance");
            Tool.addClass(overBalance, "active");
            //初始化分页大小
            //this.$refs.pageHelper.size=1;
            this.toList(1, PRODUCT_TYPE.PRODUCT_OVER_BALANCE.key);
        },
        methods: {
            getWidth() {
                $(window).on("resize", function () {
                    let carousel = document.querySelectorAll("#pro_carousels .el-carousel__item");
                    let carouselTitle = document.getElementsByClassName("carousel_title")[0];
                    let carouselDesc = document.getElementsByClassName("carousel_desc")[0];
                    let carouselLink = document.getElementsByClassName("carousel_link")[0];
                    let carouselBox = document.getElementsByClassName("carousel_box");
                    let navTabs = document.getElementsByClassName("nav-tabs")[0];
                    //获取type的li a标签
                    let lia = document.getElementsByClassName("nav-tabs-lia");

                    let wid = $(window).width();
                    for (let i = 0; i < carousel.length; i++) {
                        if (wid >= 1200) {
                            carouselBox[i].style = "margin-left:300px;";
                        } else if (wid > 992 && wid < 1200) {
                            carouselBox[i].style = "margin-left:130px;";
                            carousel[i].style.backgroundPosition = "center";
                            for (let j = 0; j < lia.length; j++) {
                                lia[j].style = "width:200px";
                            }
                        } else if (wid < 992 && wid >= 768) {
                            carouselBox[i].style = "margin-left:80px;";
                            carousel[i].style.backgroundPosition = "center";
                            for (let j = 0; j < lia.length; j++) {
                                lia[j].style = "width:100px;margin-right:25px;";
                            }
                            navTabs.style = "text-align:center;margin-left:20px;";
                        } else if (wid < 768) {
                            carouselBox[i].style = "margin-left:10px;";
                            carousel[i].style.backgroundPosition = "center";
                            for (let j = 0; j < lia.length; j++) {
                                lia[j].style = "width:100px;margin-right:10px;";
                            }
                            navTabs.style = "text-align:center;margin-left:50px;";
                        }
                    }

                }).trigger("resize");
            },
            getCarousel(item) {
                let carousels = document.getElementById("pro_carousels");
                let carousel = document.querySelectorAll("#pro_carousels .el-carousel__item");
                for (let i = 0; i < carousel.length; i++) {
                    carousel[i].style = "background-image: url("+this.carouselImg[i]+");";
                }
            },
            toList(page, typeId) {
                this.typeId = typeId;
                if (Tool.isEmpty(typeId)) {
                    this.typeId = this.products[0].typeId;
                }
                let loading = this.openLoading();
                this.$axios.post(process.env.VUE_APP_SERVER + '/business/client/product/page/list', {
                    typeId: this.typeId,
                    currentPage: page, //向后端发送参数。当前页
                    size: this.$refs.pageHelper.size, //引用传入组件后，在标签中refs定义的别名
                }).then((response) => {
                    setTimeout(function () {
                        loading.close();
                    }, 200);
                    let resp = response.data;
                    this.products = resp.responseData.listPageData;
                    this.$refs.pageHelper.render(page, resp.responseData.totalSize);
                })
            },

            inDetail(item) {
                SessionStorage.set(PRODUCT,item);
                this.$router.push({
                    //这里注意，如果我们定义的name有同名，这里再次使用name会调到router的第一个同名name，这里需要使用path来指定router.push
                    path:"detail",
                    params:{item}
                });
            },
            /*轮播产品列表*/
            getCarouselList() {
                let loading = this.openLoading();
                this.$axios.get(process.env.VUE_APP_SERVER + "/business/client/product/carousel/list")
                    .then((response) => {
                        setTimeout(function () {
                            loading.close();
                        },200);
                        let resp=response.data;
                        if(resp.success){
                            this.carouselProducts=resp.responseData;
                            //更新轮播图图片
                            for(let i=0;i<this.carouselProducts.length;i++){
                                this.carouselImg.push(this.carouselProducts[i].videoCover);
                            }
                            this.getCarousel();
                        }
                    })
            },
        }
    }
</script>

<style scoped>
    /*轮播图*/
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-carousel__item {
        background-position: center;
        max-height: 300px;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    .pro_carousel .carousel_box {
    }

    .pro_carousel .carousel_box .carousel_title {
        min-width: 180px;
        max-width: 350px;
        margin-top: 20px;
        font-size: 18px;
        font-weight: bolder;
        line-height: 70px;
        text-align: center;
        color: #fff;
        background-color: rgba(255, 255, 255, .4);
        /*border: 5px solid #ffffff;*/
    }

    .pro_carousel .carousel_desc {
        max-width: 350px;
        margin-top: 20px;
        font-size: 15px;
        color: white;
    }

    .pro_carousel .carousel_link {
        cursor: pointer;
        background-color: rgba(255, 106, 0, 1);
        max-width: 200px;
        margin-top: 20px;
        line-height: 40px;
        text-align: center;
        color: #ffffff;
    }

    .pro_carousel .carousel_link:hover, .pro_carousel .carousel_link:focus {
        background-color: rgb(252, 126, 36);
    }

    /*产品列表页*/
    .product .row {
        margin-top: 20px;
    }

    .product .row .left_title {
        display: inline-block;
        width: 100%;
        text-align: center;
        background-color: #e92322;
        color: white;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        margin-bottom: 20px;
        position: relative;
    }

    .product .row .left_title .titleText {
        position: relative;
    }

    /*.product .row .left_title .titleText::before{
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 4px;
        border: 1px solid #ccc;
        top: 20px;
        left:190px;
    }*/
    .product .row .left_title span {
        display: inline-block;
        padding-bottom: 20px;
    }

    .product .row .left_list .nav-tabs li {
        margin-bottom: 10px;
        border-left: 10px solid #e92322;
    }

    .product .row .left_list .nav-tabs li.active a {
        border-top-left-radius: unset;
        border-top-right-radius: unset;
        background-color: #e92322;
        color: #ffffff;
    }

    /*总宽度最高260*/
    .product .row .left_list .nav-tabs li a {
        display: inline-block;
        width: 245px;
        text-align: center;
        border: 0;
        font-size: 16px;
        font-weight: bolder;
        background-color: #eeeeee;
        color: #777;
        /*默认margin-right：2px*/
        margin-left: 5px;
        cursor: pointer;
    }

    .product .row .left_list .nav-tabs li a:hover, .product .row .left_list .nav-tabs li a:focus, .product .row .left_list .nav-tabs li a.active {
        border-top-left-radius: unset;
        border-top-right-radius: unset;
        background-color: #e92322;
        color: #ffffff;
    }

    .product .row .left_list .nav-tabs li.active {
        border-left: 10px solid #e92322;
    }

    /*商品卡片*/
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    /deep/ .el-card {
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .tab-content {
        margin-left: 10px;
    }

    .pro_card_to {
        cursor: pointer;
        display: inline-block;
        width: 100%;
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 10px;
        color: #ffffff;
        background-color: #e92322;

        text-align: center;
        line-height: 20px;
        font-size: 16px;
    }

    .pro_card_to:hover, .pro_card_to:focus {
        background-color: rgba(159, 2, 1, 1);
    }

    .pageHelper {
        text-align: center;
        margin-bottom: 20px;
    }
</style>